<template>
    <div >
        <el-button type="primary" @click="saveCourse">返回</el-button>
        <el-form id="div" :inline="true" :rules="rules" ref="form" :model="form" label-width="80px">
            <!--        主题-->
            <el-form-item label="主题" prop="theme">
                <el-input class="input" v-model="form.theme" placeholder="请输入主题"/>
            </el-form-item>
            <br/>
            <el-form-item label="适应年龄" prop="fitAge">
                <el-select v-model="form.fitAge" clearable placeholder="请选择">
                    <el-option
                            v-for="item in stageType"
                            :key="item.id"
                            :label="item.dicName"
                            :value="item.dicName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课程特色" prop="courseFeatureId">
                <el-select v-model="form.courseFeatureId" clearable placeholder="请选择">
                    <el-option
                            v-for="item in courseLabel"
                            :key="item.id"
                            :label="item.dicName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <br/>
<!--            教师-->
            <el-form-item label="教师" prop="teacherId">
                <el-select class="input" v-model="form.teacherId" clearable placeholder="请选择">
                    <el-option
                            v-for="item in teachers"
                            :key="item.id"
                            :label="item.teacherName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <br/>
            <el-form-item label="封面">
<!--                文件上传-->
                <el-upload
                        name="file"
                        action="/api/Studies_to_travel/upload/singleFile"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :limit="1"
                        :on-success="success"
                        :on-remove="handleRemove"
                        :auto-upload="true">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <br/>
<!--            摘要-->
            <el-form-item label="摘要"  prop="abstractText">
                <el-input
                        :rows="5"
                        class="input"
                        type="textarea"
                        maxlength="120"
                        show-word-limit
                        placeholder="请输入内容"
                        v-model="form.abstractText">
                </el-input>
            </el-form-item>
            <br/>
<!--            课程目标-->
            <el-form-item label="课程目标">
            </el-form-item>
            <uEditor @send="receive"/>
            <el-form-item>
                <el-button type="danger" @click.prevent="onSubmit('form')" style="width: 220px;margin-left: 320px">保存</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    import {Form,Button,Input,FormItem,Select,Upload,Option,Dialog} from "element-ui";
    import uEditor from "../editor/uEditor";
    import {post} from "../../../../../request/AxiosMAX";

    export default {
        name: "SaveCourse",
        components:{
            "el-form":Form,
            "el-form-item":FormItem,
            "el-input":Input,
            "el-select":Select,
            "el-upload":Upload,
            "el-option":Option,
            "el-dialog":Dialog,
            "el-button":Button,
            uEditor
        },
        data(){
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                form:{
                    fitAge:'',
                    courseFeatureId:'',
                    baseId:this.$store.state.base.id,
                    baseName:this.$store.state.base.baseName,
                    baseAddress:this.$store.state.base.belongAddress,
                    courseFeatureName:"",
                    theme:'',
                    abstractText:'',
                    coverImage:'',
                    courseTarget:'',
                    teacher:{},
                    teacherId:''
                },
                rules: {
                    theme: [
                        { required: true, message: '请输入主题', trigger: 'blur' }
                    ],
                    fitAge: [
                        { required: true, message: '请选择一个适合学段', trigger: 'change' }
                    ],
                    courseFeatureId: [
                        { required: true, message: '请选择一个适合学段', trigger: 'change' }
                    ],
                    teacherId: [
                        { required: true, message: '请选择一个教师', trigger: 'change' }
                    ],
                    abstractText: [
                        { required: true, message: '请输入摘要', trigger: 'blur' }
                    ]
                },
                //教师数组
                teachers: [],
                //课程标签数组
                courseLabel:[],
                //适合学段
                stageType:[]
            }
        },
        methods: {
            //返回课程列表
            saveCourse(){
                this.$router.push("/base/studiesCourse/StudiesCourseList");
            },
            //获取子组件传递的参数
            receive(comment){
                this.form.courseTarget = comment;
            },
            //文件上传成功的回调函数
            success(res){
                //赋值给需要提交的数据上
                this.form.coverImage=res.data;
            },
            //请求添加
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        //保存
                       post("/api/Studies_to_travel/course/insertCourseInfo",this.form)
                           .then(res=>{
                               if (res.code===0){
                                   //清楚表单数据
                                   this.$refs[formName].resetFields();
                                   this.$message({
                                       message: '保存成功~',
                                       type: 'success'
                                   });
                               }else {
                                   this.$message({
                                       message: '保存失败~',
                                       type: 'error'
                                   });
                               }
                           })
                           .catch(err=>{
                               console.info(err);
                               this.$message({
                                   message: '网络错误~',
                                   type: 'error'
                               });
                           });
                    }
                })
            },
            //文件上传
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        },
        //生命周期
        created() {
            let data={
              baseId:this.$store.state.base.id
            };
            //查询教师数组
            post("/api/Studies_to_travel/teacher/queryByBaseId",data).then(
                res=>{
                    //判断是否查询成功
                    if (res.code===0){
                        //赋值给教师数组
                        this.teachers = res.data;
                    }
                }
            ).catch(
                //失败
                err=>{
                    console.info(err);
                }
            );
            //查询课程特色 课程特色字典code course_type
            post("/api/Studies_to_travel/dict/queryByDicTypeCode",{dicTypeCode:"course_type"})
                .then(res=>{
                    //判断是否查询成功
                    if (res.code===0){
                        //赋值
                        this.courseLabel = res.data;
                    }
                })
                .catch(err=>{
                    console.info(err);
                });

            //查询适合学段 适合学段字典code stage_type
            post("/api/Studies_to_travel/dict/queryByDicTypeCode",{dicTypeCode:"stage_type"})
                .then(res=>{
                    //判断是否查询成功
                    if (res.code===0){
                        //赋值
                        this.stageType = res.data;
                    }
                })
                .catch(err=>{
                    console.info(err);
                });
        }
    }
</script>

<style scoped>

    .input{
        display: block;
        width: 510px;
    }
    #div{
        margin-left: 15%;
    }
</style>
